<template>
    <div id="app">
        <mt-header :title="title" :fixed="fixed" style="z-index: 999;">
            <mt-button icon="back" slot="left" @click="back">返回</mt-button>
            <el-dropdown slot="right">
                     <span class="header-btn">
                        <i style="color: white" class="el-icon-more re"></i>
                    </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="toHome"><i style="padding-right: 8px" class="el-icon-s-home"></i>返回主页</el-dropdown-item>
                    <el-dropdown-item @click.native="logout"><i style="padding-right: 8px" class="el-icon-star-off"></i>退出系统</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!--<mt-button icon="more" slot="right" @click="toHome"></mt-button>-->
        </mt-header>
        <div class="layout">
          <router-view @getInfoCount="sendInfoCount"></router-view>
        </div>
        <mt-tabbar v-model="selected" :fixed="fixed" style="background-color: #7FA1BE">
            <mt-tab-item id="home">
                <img v-if="selected ==='home'" slot="icon" src="../../assets/app/home.png">
                <img v-else slot="icon" src="../../assets/app/home-no.png">
                <span>主页</span>
            </mt-tab-item>
            <mt-tab-item id="center">
                <img v-if="selected ==='center'" slot="icon" src="../../assets/app/center.png">
                <img v-else slot="icon" src="../../assets/app/center-no.png">
                <span>个人中心</span>
            </mt-tab-item>
            <mt-tab-item id="info">
                <img v-if="selected ==='info'" slot="icon" src="../../assets/app/info.png">
                <img v-else slot="icon" src="../../assets/app/info-no.png">
                <span>通知<mt-badge v-show="infoCount>0" type="error" size="small">{{infoCount}}</mt-badge></span>
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return{
                selected:"home",
                fixed:true,
                title:"主页",
                infoCount:0,
                popupVisible:false
            }
        },
        mounted(){
          this.sendInfoCount();
        },
        methods:{
          back(){
              this.$router.back();
          },
          toHome() {
             this.$router.push("/home");
          },
            sendInfoCount(){
                let user = JSON.parse(localStorage.getItem("user"));
                this.$http.get("/information/getUnReadInfoCount",{params:{"userId":user.id}}).then(res=>{
                    if (res.status===200){
                        this.infoCount = res.data;
                    }
                })
            },
            async logout(){
                this.$http.get("/user/loginOut").then(res=>{
                    if (res.status===200){
                        Message.success(res.data);
                        localStorage.clear();
                        this.$router.push("/login")
                    }
                })
            },

       },
        watch:{
            "selected":function (data) {
                if (data==='home'){
                    this.title= "主页";
                    this.$router.push("/app/home")
                }
                if (data === 'center'){
                    this.title= "个人中心";
                    this.$router.push("/app/center")
                }
                if (data === 'info'){
                    this.title= "通知";
                    this.$router.push("/app/info")
                }
            }
        },

    }
</script>

<style scoped lang="less">
    #app{
        width: 100%;
        height: calc(~'100vh');
        .layout{
            width: 100%;
            margin-top: 40px;
            overflow: auto;
            margin-bottom: 60px;
        }
    }
    .mint-tabbar > .mint-tab-item.is-selected{
        background: #7FA1BE;
        color: aqua;
    }
    .re{
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); /* Internet Explorer 9*/
        -moz-transform:rotate(90deg); /* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg); /* Opera */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
</style>